<template>
	<view class="content">
		<view class="headImg" @click="saveImg()">
			<view class="left">头像上传</view>
			<view class="right">{{hint}}</view>
			<uni-icon type="arrow" size="20" color="#b6b6b6"></uni-icon>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="mydata">
				<view class="left">姓名</view>
				<input type="text" name="name" :value="name" placeholder="填写您的姓名,作为称呼" placeholder-style="color: #b6b6b6" />
			</view>
			<view class="mydata">
				<view class="left">联系电话</view>
				<input type="number" name="mobile" :value="mobile" placeholder="填写您的电话,方便联系您" placeholder-style="color: #b6b6b6" />
			</view>
			<view class="mydata">
				<view class="left">联系地址</view>
				<input type="text" name="address" :value="address" placeholder="填写您的地址,方便联系您" placeholder-style="color: #b6b6b6" />
			</view>
			<view class="myExperience">
				<view class="left">护理经验</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="myExperience">
				<view class="left">服务家庭数</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="uni-input">{{array2[index2]}}</view>
					</picker>
				</view>
			</view>
			<button class="submit" form-type="submit">提 交 审 核</button>
		</form>
	</view>
</template>

<script>
	import {dns} from '@/pages/dns.js'
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data(){
			return {
				hint: '*修改头像',
				head_img: '',
				head_url: '',
				name: '',
				mobile: '',
				address: '',
				array: ['0年','1年', '2年', '3年', '4年','5年', '6年', '7年', '8年','9年', '10年', '11年', '12年','13年','14年','15年','16年','17年','18年','19年','20年'],
				index: 0,//经验
				array2: ['0户','1户', '2户', '3户', '4户','5户', '6户', '7户', '8户','9户', '10户', '11户', '12户','13户','14户','15户','16户','17户','18户','19户','20户',
						'21户','22户', '23户', '24户', '25户','26户', '27户', '28户', '29户','30户', '31户', '32户', '33户','34户','35户','36户','37户','38户','39户','40户','41户',
						'42户', '43户', '44户','45户','46户','47户','48户','49户','50户'],
				index2: 0,//户数
			}
		},
		components: {
			uniIcon
		},
		onLoad() {
			this.getMyData()
		},
		onShow() {
			var headImg = uni.getStorageSync("headImg");
			console.log(headImg)
			if(headImg){
				this.head_img = headImg;
			}
		},
		methods:{
			getMyData(){//获取个人资料
				uni.request({
					method: 'GET',
					header:{
						token: uni.getStorageSync("token")
					},
					url: dns+ 'matron/data',
					success: (res)=>{
						console.log(res)
						this.head_img = res.data.data.head_img;
						this.head_url = res.data.data.head_url;
						this.name = res.data.data.name;
						this.mobile = res.data.data.mobile;
						this.address = res.data.data.address;
						this.index = res.data.data.year == '' ? 0 : res.data.data.year;
						this.index2 = res.data.data.households == '' ? 0 : res.data.data.households
					}
				})
			},
			saveImg(){//头像上传
				uni.navigateTo({
					url: '/pages/my/womanport/mydata/headImg/index'
				})
			},
			formSubmit(e){//提交表单
				if(!this.head_img){
					uni.showToast({
						icon: 'none',
						title: '请上传您的头像!'
					})
					return
				};
				if(e.detail.value.name==''||e.detail.value.mobile==''||e.detail.value.address==''){
					uni.showToast({
						icon: 'none',
						title: '完善您的信息!'
					})
					return
				}
				uni.request({
					method: 'POST',
					data: {
						name: e.detail.value.name,
						mobile: e.detail.value.mobile,
						address: e.detail.value.address,
						year: this.index,
						households: this.index2,
						head_img: this.head_img
					},
					header:{
						token: uni.getStorageSync("token")
					},
					url: dns + 'matron/edit',
					success: (res)=>{
						if(res.data.status == -1){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
							this.ifShow = true;
							return;
						}
						if(res.data.status == 0){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
							return;
						}
						if(res.data.status == 1){
							uni.showToast({
								title: res.data.msg
							})
						}
						
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index2 = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
	.content{
		height: 100%;
		background-color: #f6f6f6;
		padding-top: 50upx;
		font-size: 34upx;
		.headImg{
			position: relative;
			line-height: 100upx;
			background-color: #fff;
			padding: 0 40upx;
			margin-bottom: 50upx;
			display: flex;
			justify-content: space-between;
			.right{
				padding-right: 40upx;
				font-size: 28upx;
				color: #f45f61;
			}
			uni-icon{
				position: absolute;
				top: 4px;
				right: 40upx;
			}
		}
		.mydata{
			line-height: 100upx;
			background-color: #fff;
			padding: 0 40upx;
			display: flex;
			border-bottom: 1upx solid #eee;
			.left{
				width: 180upx;
			}
			input{
				flex: 1;
				height: 100upx;
			}
			.uni-list-cell-db{
				flex: 1;
			}
		}
		.mydata:nth-of-type(4){
			margin-bottom: 50upx;
		}
		.myExperience{
			line-height: 100upx;
			background-color: #fff;
			padding: 0 40upx;
			display: flex;
			border-bottom: 1upx solid #eee;
			.left{
				width: 180upx;
			}
			input{
				flex: 1;
				height: 100upx;
			}
			.uni-list-cell-db{
				flex: 1;
			}
		}
		.submit{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			line-height: 100upx;
			font-size: 34upx;
			background-color: #f45f61;
			border-radius: 0;
			color: #fff;
		}
	}
</style>
